<template>
  <!--查看明细-->
	<div id="app">
      <loading v-if="loading"></loading>
      <div v-else class="evaluate">
          <div class="text">
              <p class="text-p">请选择取消订单的原因（必选）：</p>
          </div>
          <div class="tag-list">
              <span :class="{'on':item.checked}" v-for="(item,index) in orderTag" v-text="item.text" @click="selecttext(index,item)"></span>
          </div>
          <div class="input-textar">
              <textarea class="text-area" contenteditable="true" name="eval-text" cols="30" rows="10" v-model="reason" placeholder="其他原因(选填)"></textarea>
          </div>
          <div class="fixed_btn center" @click="submitCancel">提交申请</div>
      </div>
	</div>
</template>
<script>
    import 'assets/css/common.css'
    import './index.css'
    import common from 'assets/js/common'
    import Loading from "components/loading.vue"
export default {
  data() {
    return {
        reason:'',
        loading:true,
        orderId:'',
        orderTag:[],
        value:[]
    }
  }, 
  components:{ Loading },
  //已成功挂载，相当ready()
  mounted(){
      this.orderId = common.getQueryString('orderId');
      this.getTags();
  },
  //相关操作事件
  methods: { 
      //选择标签
      selecttext:function(index,item){
          if(!item.checked){
             this.value.push(item.id);
          }else{
             this.value.splice(this.value.indexOf(item.id), 1);
          }
          this.orderTag[index].checked = !item.checked;
      },
      getTags:function(){
          common.ajax({
              type:'GET',
              url:'api/adder/order/creason'
          }).then(res=>{
             this.loading = false;
             res.data.map((item,index)=>{
               this.$set(item,'checked',false);
             })
             this.orderTag = res.data;
             console.log(res.data)
           })
      },
      submitCancel(){
        console.log(this.value);
        if(this.value.length == 0){
             common.errMessage("请选择取消订单的原因");
        }else{
            common.ajax({
              url:'api/adder/order/'+this.orderId+'/cancel',
              data:{
                reason_id:this.value.join(','),
                reason:this.reason
              }
            }).then(res=>{
               common.errMessage(res.info);
            })
        }
      }
  }
}
</script>

